<template>
  <el-tooltip
    v-if="edgeData"
    placement="top"
    effect="light"
    :enterable="true"
    trigger="hover"
    :disabled="!edgeData.buttonName?.zh_CN"
  >
    <div
      v-if="edgeData.buttonName?.zh_CN"
      class="edgeBtn"
      @click.stop="handleShowPopover"
    >
      {{ edgeData.buttonName?.zh_CN }}
    </div>
    <div
      v-else
      v-show="edgeData.showAdd && props.mode === 'edit'"
      class="edgeButtonContainer"
      @click.stop="handleShowPopover"
    >
      <img
        style="width: 24px; height: 24px"
        src="@/assets/lifecycle/edgeBtn.svg"
      />
    </div>
    <template #content>
      <ul class="edgeTooltipClass">
        <li>
          <span class="label">迁移名称</span
          ><span class="val">{{ edgeData.buttonName?.zh_CN || "-" }}</span>
        </li>
        <li>
          <span class="label">流转方向</span
          ><span class="val">{{ getWanderAboutName }}</span>
        </li>
      </ul>
    </template>
  </el-tooltip>
</template>
<script setup lang="ts">
  import type { lifecycleEdge, lifecycleNode } from "@/interface/lifecycle.ts";
  import { Edge } from "@antv/x6";
  import { onMounted, ref, computed } from "vue";
  import { ElTooltip } from "element-plus";

  const props = defineProps<{
    edge: Edge<Edge.Properties>;
    nodeList: any;
    mode: string;
    onClickShow: (
      edge: Edge<Edge.Properties>,
      e: { x: number; y: number },
    ) => void;
  }>();
  console.log("nodeList", props.nodeList);
  const isShowAdd = ref(false);
  const edgeData = ref<lifecycleEdge>({});
  const handleShowPopover = (e: MouseEvent) => {
    if (props.mode === "preview") return;
    console.log(e.currentTarget);
    const { top, left } = (
      e.currentTarget as HTMLElement
    ).getBoundingClientRect();
    isShowAdd.value = !isShowAdd.value;
    // console.log(isShowAdd.value, "isShowAdd");
    props.onClickShow(props.edge, { x: left, y: top + 34 });
  };
  const getWanderAboutName = computed(() => {
    const formNodeName = props.nodeList.value.find(
      (item) => item.id === edgeData.value.fromNodeId,
    )?.name.zh_CN;
    const toNodeName = props.nodeList.value.find(
      (item) => item.id === edgeData.value.toNodeId,
    )?.name.zh_CN;
    return `${formNodeName} -- ${toNodeName}`;
  });

  onMounted(() => {
    edgeData.value = props.edge.getData<lifecycleEdge>();
    props.edge.on("change:data", (args) => {
      edgeData.value = args.cell.getData<lifecycleEdge>();
      // console.log(edgeData.value, "edgeData.value");
    });
    // props.edge.on("", (args) => {
    //   // edgeData.value = args.cell.getData<lifecycleEdge>();
    // });
  });
</script>

<style scoped lang="scss">
  .edgeBtn {
    width: 100%;
    height: 100%;
    background: #2ba471;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  .edgeButtonContainer {
    position: relative;
    width: 24px;
    height: 24px;
    //border-radius: 4px;
    //border: 1px solid #d9dde2;
    //background: #f4f5f7;
    cursor: pointer;
    //display: flex;
    //align-items: center;
    //justify-content: center;
  }
  .edgeTooltipClass {
    width: 178px !important;
    padding: 7px 0 !important;
    margin: 0;
    li {
      display: flex;
      justify-content: space-between;
      .label {
        color: #5e5e5e;
        font-size: 12px;
      }
      .val {
        color: #141414;
        font-size: 12px;
      }
    }
  }
</style>
